<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="../../css/crud.css" rel="stylesheet"/>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	
</head>
<body>
<div id="pageDiv"> 
     <div>
		
		<form name="f" action="">
		
		用户名:<input type="text" name="userAccount">
		状态:<input type="checkbox" id="userState" name="userState" checked="checked"> <!-- 选中的话表示查询在用状态的 -->
		<input type="button" onclick="query(0)" value="查询 " >
		</form>
		<hr/>
	 </div>
	 <div id="table"></div><!-- 用来显示查询的结果 -->
	 <div>
			<input type="button"  id="first" onclick="query(1)" value="首页">
			<input type="button"  id="up" onclick="query(2)" value="上一页">
			<input type="button"  id="next" onclick="query(3)" value="下一页">
			<input type="button"  id="last" onclick="query(4)" value="尾页">
			每页显示的数据笔数：<select id="pageSize" onchange="query(5)">
				<option value='3'>3</option>
				<option selected="selected" value='5'>5</option>
				<option value='10'>10</option>
			</select>
			<span id="showPageMessage"></span>
		</div>
</div>
</body>
<script type="text/javascript">

$("#addDiv").hide();//页面初始化的时候只进行查询，所以将新增DIV关闭
$("#showAllMessage").hide();//关闭对于增删改提示信息的DIV
var pageSize = 5;//每页显示5笔数据
var pageCurrent = 1;//显示第一页
var allPage = 0;//总共有多少页的数据
var allCurrent = 0;//总共有多少比数据

query(0);//初始查询

function query(a){
	var userAccount = f.userAccount.value;
	var userState = 1;
	if(document.getElementById("userState").checked == false){
		userState = 0;
	}
	if(a == 0) {
		pageCurrent = 1;
	}else if(a == 1){
		pageCurrent = 1;
	}else if(a == 2){
		pageCurrent = pageCurrent - 1;
	}else if(a == 3){
		pageCurrent = pageCurrent + 1;
	}else if(a == 4){
		pageCurrent = allPage;  
	}else if(a == 5){
		pageCurrent = 1;//总共有10笔数据，现在每页显示3笔， 当前显示的是第4页 ，改变每页显示的数据笔数为10笔,那么如果显示的页数还是第4页的话，没有数据，
		//所以最好在改变每页显示的数据笔数的时候，让当前页回到第1页
		pageSize = $("#pageSize").val();//取得select标签的值
		
	}
	
	
	$.ajax({//进行提交
		type : "post",//提交方式
		url : "${pageContext.request.contextPath}/servlet/queryUserByUserAccountAndState",//提交路径
		async : true,//是否异步
		dataType : 'json',//数据格式（不进行跨越json，跨域使用jsonp），
		data : { //参数
			userAccount : userAccount,
			userState : userState,
			pageSize : pageSize,
			pageCurrent : pageCurrent
		},
		success : function(data) {//执行成功后调用的方法
			var content = "<table border='0'><tr><th>ID</th><th>用户名</th><th>性别</th><th>邮箱</th><th>年龄</th><th>密码</th><th>状态</th><th>出生日期</th></tr>";
			allCurrent = data[0].allCurrent;//取得总共的数据笔数
			for(var i = 1;i<data.length;i++){
				var item = data[i];
				content += "<tr ondblclick='goUpdate("+item.userId+")'><td>"+item.userId+"</td><td>"+item.userAccount+"</td><td>"+item.userSex+"</td><td>"+item.userEmail+"</td><td>"+item.userAge+"</td><td>"+item.userPass+"</td><td>"+
				item.userState+"</td><td>"+item.userBirthday+"</td></tr>"
				
			}
			content += "</table>";
			$("#table").html(content);
			checkEvery();
			
			
		},
		error : function(err) {//执行失败后的失败信息的显示
			console.log(err);
		}
	});	
}
function checkEvery(){
	//计算总共的页数
	if(allCurrent%pageSize == 0){//总共的数据笔数%每页显示的数据笔数
		allPage = allCurrent/pageSize;
	}else{
		allPage = parseInt(allCurrent/pageSize) + 1;
	}
	//显示分页信息
	$("#showPageMessage").html("<font color='blue'>当前显示第"+pageCurrent+"页，总共有"+allCurrent+"笔数据，总共有"+allPage+"页</font>");
	if(pageCurrent == 1 && allPage == 1){//如果总共就1页数据，所有按钮都不能按
		document.getElementById("first").disabled = true;
		document.getElementById("up").disabled = true;
		document.getElementById("next").disabled = true;
		document.getElementById("last").disabled = true;
	}else if(pageCurrent == 1){//当前显示第1页，但是总共的页数大于1
		document.getElementById("first").disabled = true;
		document.getElementById("up").disabled = true;
		document.getElementById("next").disabled = false;
		document.getElementById("last").disabled = false;
	}else if(pageCurrent == allPage){
		document.getElementById("first").disabled = false;
		document.getElementById("up").disabled = false;
		document.getElementById("next").disabled = true;
		document.getElementById("last").disabled = true;
	}else{
		document.getElementById("first").disabled = false;
		document.getElementById("up").disabled = false;
		document.getElementById("next").disabled = false;
		document.getElementById("last").disabled = false;
	}
}
</script>
</html>